<template>
	<view>
		<view class="main">
			<view class="tipsBox">
				<text class="frame"></text>
				<text class="essentialInfo">基本信息<text class="symbol">*</text> </text>
			</view>
			<view class="commodityBox">
				<view class="commoditytips">
					<text class="coomodityfont">商品图片</text>
					<text class="numTips">(最多九张)</text>
				</view>
				<view class="commodityImg_box">
					<sunui-upimg @change="getImageInfo1" :upload_auto="true" ref="upimg1" :upload_count="9"></sunui-upimg>
				</view>
				<view class="commodityName">
					<input class="inputCoomodity" type="text" placeholder="请输入商品名称" />
					<text class="name">商品名称</text>
				</view>
				<view class="commodityName">
					<text class="name">商品分类</text>
					<text class="spchose">请选择</text>
					<image class="spback" src="../../../static/user2/rightjt.png"></image>
				</view>
				<view class="commodityName">
					<text class="name">多商户分类</text>
					<text class="spchose">请选择</text>
					<image class="spback" src="../../../static/user2/rightjt.png"></image>
				</view>
				<view class="commodityName">
					<text class="name">单&nbsp&nbsp位</text>
					<input class="inputCoomodity" type="text" placeholder="请输入单位（例如：个、件）" />
				</view>
			</view>
			<view class="tipsBox">
				<text class="frame"></text>
				<text class="essentialInfo">规格、价格及库存 <text class="symbol">*</text> </text>
			</view>
			<view class="specificationBox">
				<text class="specificationfont">成本价</text>
				<text class="moneySymbol">￥</text>
				<input class="price" type="text" placeholder="999"/>
			</view>
			<view class="specificationBox">
				<text class="specificationfont">原&nbsp&nbsp价</text>
				<text class="moneySymbol">￥</text>
				<input class="price" type="text" placeholder="999"/>
			</view>
			<view class="specificationBox">
				<text class="specificationfont">售&nbsp&nbsp价</text>
				<text class="moneySymbol">￥</text>
				<input class="price" type="text" placeholder="999"/>
			</view>
			<view class="specificationBox">
				<text class="specificationfont">库&nbsp&nbsp存</text>
				<input class="inputnum" type="number" placeholder="请输入数量"/>
			</view>
			<view class="specificationBox">
				<text class="specificationfont">一级分销</text>
				<input class="inputnum" type="text" placeholder="百分比"/>
			</view>
			<view class="specificationBox">
				<text class="specificationfont">二级分销</text>
				<input class="inputnum" type="text" placeholder="百分比"/>
			</view>
			<view class="specificationBox">
				<text class="specificationfont">三级分销</text>
				<input class="inputnum" type="text" placeholder="百分比"/>
			</view>
			<view class="specificationBox">
				<text class="specificationfont">四级分销</text>
				<input class="inputnum" type="text" placeholder="百分比"/>
			</view>
			<view class="specificationBox">
				<text class="specificationfont">五级分销</text>
				<input class="inputnum" type="text" placeholder="百分比"/>
			</view>
			<view class="specificationBoxa">
				<view class="addgg">
					添加规格
				</view>
			</view>
			<view class="tipsBox">
				<text class="frame"></text>
				<text class="essentialInfo">运费、包邮及限购<text class="symbol">*</text> </text>
			</view>
			<view class="freeShipping_Box">
				<text class="freeShipping">运费设置</text>
				<text class="spchose">请选择</text>
				<image class="spback" src="../../../static/user2/rightjt.png"></image>
			</view>
			<view class="freeShipping_Box">
				<text class="freeShipping">满件包邮</text>
				<input class="free" type="text" placeholder="如果设置0或空，则不支持满件包邮"/>
			</view>
			<view class="freeShipping_Box">
				<text class="freeShipping">满额包邮</text>
				<input class="free" type="text" placeholder="如果设置0或空，则不支持满额包邮"/>
			</view>
			<view class="freeShipping_Box">
				<text class="freeShipping">限购数量</text>
				<input class="free" type="text" placeholder="如果设置0或空，则不限制购买数量"/>
			</view>
			<view class="tipsBox">
				<text class="frame"></text>
				<text class="essentialInfo">商品详情<text class="symbol">*</text> </text>
			</view>
			<view class="freeShipping_Box">
				<text class="freeShipping">商品详情图</text>
				<text class="spchose">请选择</text>
				<image class="spback" src="../../../static/user2/rightjt.png"></image>
			</view>
			<view class="tipsBox">
				<text class="frame"></text>
				<text class="essentialInfo">服务详情<text class="symbol">*</text> </text>
			</view>
			<view class="freeShipping_Box">
				<text class="freeShipping">服务内容</text>
				<text class="spchose">请选择</text>
				<image class="spback" src="../../../static/user2/rightjt.png"></image>
			</view>
			<view class="market">
				商品上架
			</view>
		</view>
	</view>
</template>

<script>
	import sunUiUpimg from '@/components/sunui-upimgb/sunui-upimg.vue';
	export default {
		components: {
			'sunui-upimg': sunUiUpimg
		},
		data() {
			return {

			};
		},
		methods: {
			getImageInfo1(e) {
				console.log(e)
			},
		}
	}
</script>

<style lang="scss">
	.main {
		width: 750rpx;
	}

	.tipsBox {
		width: 710rpx;
		height: 90rpx;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: center;
	}

	.frame {
		display: block;
		width: 10rpx;
		height: 30rpx;
		background: rgba(115, 34, 216, 1);
		border-radius: 5rpx;
	}

	.essentialInfo {
		font-size: 28rpx;
		color: #333333;
		margin-left: 12rpx;
	}

	.symbol {
		font-size: 28rpx;
		color: #7322D8;
	}

	.commodityBox {
		width: 710rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		position: relative;
		left: 20rpx;
	}

	.commoditytips {
		width: 710rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
	}

	.coomodityfont {
		font-size: 28rpx;
		position: absolute;
		left: 21rpx;
	}

	.numTips {
		font-size: 24rpx;
		color: #8E8E8E;
		position: absolute;
		left: 145rpx;
	}

	.commodityImg_box {
		width: 710rpx;
		display: flex;

	}

	.commodityName {
		width: 710rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.name {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 21rpx;
	}

	.inputCoomodity {
		font-size: 28rpx;
		position: absolute;
		left: 156rpx;
	}

	.spchose {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		right: 45rpx;
	}

	.spback {
		width: 14rpx;
		height: 22rpx;
		position: absolute;
		right: 20rpx;
	}

	.specificationBox {
		width: 710rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: center;
	}
   .specificationfont{
	   font-size:28rpx;
	   font-family:PingFang SC;
	   font-weight:400;
	   color:rgba(51,51,51,1);
	   position: absolute;
	   left: 21rpx;
   }
	.specificationBoxa {
		width: 710rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
		position: relative;
		left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.inputnum{
		font-size: 28rpx;
		position: absolute;
		left: 156rpx;
		}
		.moneySymbol{
			font-size: 28rpx;
			color: #333333;
			position: absolute;
			left: 161rpx;
		}
		.price{
			font-size: 28rpx;
			position: absolute;
			left: 190rpx;
		}
		.addgg{
			width:200rpx;
			height:70rpx;
			background:rgba(115,34,216,1);
			border-radius:20rpx;
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(239,239,244,1);
			display: flex;
			align-items: center;
			justify-content: center;
			}
			.freeShipping_Box{
				width: 710rpx;
				height: 100rpx;
				background: rgba(255, 255, 255, 1);
				border-radius: 10rpx;
				position: relative;
				left: 20rpx;
				display: flex;
				align-items: center;
			}
			.freeShipping{
				font-size:28rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				position: absolute;
				left: 21rpx;
			}
			.free{
				width: 450rpx;
				font-size: 28rpx;
				position: absolute;
				left: 156rpx;
				}
				.market{
					width:710rpx;
					height:90rpx;
					background:rgba(115,34,216,1);
					box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
					border-radius:20rpx;
					margin-top: 30rpx;
					margin-bottom: 30rpx;
					position: relative;
					left: 20rpx;
					font-size:38rpx;
					font-family:PingFang SC;
					font-weight:bold;
					color:rgba(255,255,255,1);
					display: flex;
					align-items: center;
					justify-content: center;
					}
</style>
